<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
	</head>

	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>FNST-在线笔试系统</legend>
		</fieldset>
		<div style="padding: 20px; background-color: #F2F2F2;">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">笔试新增</div>

						<div class="layui-card-body">

							<div class="layui-form">
								<label class="layui-form-label">笔试者：</label>
								<div style="width: 150px;display: inline-block;">
									<select name="user" id="user">
										<option value="">请选择</option>
									</select>
								</div>
								<button class="layui-btn addUSER">选中用户</button>
							</div>
							<hr class="layui-bg-grey">
							<label style="margin-left: 30px;">已选用户：</label>
							<!--用户列表！！！-->
							<div id="YH">
							</div>
							<!--橙色分割线-->
							<hr class="layui-bg-orange">
							<div>

								<div class="layui-form">
									<label class="layui-form-label">笔试题：</label>
									<div style="width: 150px;display: inline-block;">
										<select name="exam" id="exam">
											<option value="">请选择</option>
										</select>
									</div>
									<button class="layui-btn addEXAM">选中该题</button>
								</div>
							</div>
							<hr class="layui-bg-grey">
							<label style="margin-left: 30px;">已选试题：</label>
							<!--笔试题列表！！！-->
							<div id="BST">

							</div>

						</div>

						<hr class="layui-bg-red">
						<div class="laylayui-form-itemui-form-item" id="urlList">
							<label class="layui-form-label">生成的笔试URL：</label>

						</div>

						<div class="site-demo-button" style="margin-top: 80px; ">
							<button class="layui-btn site-demo-layedit" id="saveEXAM">保存笔试</button>

							<button class="layui-btn site-demo-layedit" style="float:right;" id="returnEXAMList">返回列表</button>
						</div>
						<input type="hidden" id="usernum" />
						<input type="hidden" id="usernames" />
					</div>
				</div>
			</div>
		</div>
		</div>
		<script src="../../layui/layui.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script>
			layui.config({
				base: './../dist/'
			}).extend({
				notice: 'notice'
			});
			var del = function(obj) {
				$("#" + obj + "").remove();
			}
			layui.use(['notice', 'form'], function() {
				var form = layui.form;
				form.render();
				var notice = layui.notice; // 允许别名 toastr
				$.ajax({
					type: 'get',
					url: host() + '/getAllTestUser?token=' + localStorage.token,
					dataType: 'json',
					async: false,
					success: function(msg) {
						var data = msg.data;
						for(var i = 0; i < data.length; i++) {
							$("#user").append("<option value=" + data[i].id + ">" + data[i].username + "</option>");
						}
						form.render('select');
					},
					error: function(msg) {
						notice.error("获取用户失败");
					}
				})

				$.ajax({
					type: 'get',
					url: host() + '/getAllQuestions?token=' + localStorage.token,
					dataType: 'json',
					success: function(msg) {
						var data = msg.data;
						for(var i = 0; i < data.length; i++) {
							$("#exam").append("<option  value=" + data[i].id + ">" + data[i].subject + "</option>");
						}
						form.render('select');
					},
					error: function(msg) {
						notice.error("获取笔试题目失败");
					}
				})

				$(".addEXAM").click(function() {
					var flag = 0;
					if($("#exam").val() != "") {
						$("#BST span").each(function() {
							var BSTID = $(this).attr("key");
							if(BSTID == $("#exam").val()) {
								notice.warning("不能重复选择笔试题");
								flag = 1;
								return;
							}
						});
						if(flag == 1) return;
						var h = '<div id="' + $("#exam").val() + '"><div class="layui-form layui-inline " style="margin-top: 5px;display: inline-block;"><div style="margin-left:110px; margin-top:0px;width: 150px;display: inline-block;"><span key=' + $("#exam").val() + '>' + $("#exam").find("option:selected").text() + '</span></div><button class="layui-btn layui-btn-danger  " onclick="del(' + $("#exam").val() + ')"  key="' + $("#exam").val() + '"  style="margin-left:3px">删除该题</button></div></div>'
						$("#BST").append(h);
					} else layer.alert("请先选择题目");
				})

				/*
				 * 选中用户
				 */
				$(".addUSER").click(function() {
					var flag = 0;
					if($("#user").val() != "") {
						$("#YH span").each(function() {
							var USERID = $(this).attr("key");
							if(USERID == $("#user").val()) {
								notice.warning("不能重复选择用户");
								flag = 1;
								return;
							}
						});
						if(flag == 1) return;
						var h = '<div id="' + $("#user").val() + '"><div class="layui-form layui-inline " style="margin-top: 5px;"><div style="margin-left:110px; margin-top:0px;width: 150px;display: inline-block;"><span key=' + $("#user").val() + '>' + $("#user").find("option:selected").text() + '</span></div><button class="layui-btn layui-btn-danger  " onclick="del(' + $("#user").val() + ')"  key="' + $("#user").val() + '"  style="margin-left:3px">删除用户</button></div></div>'
						$("#YH").append(h);
					} else notice.info("请先选择用户");
				})

				/*
				 * 保存笔试
				 */
				$("#saveEXAM").click(function() {
					var BST = "";
					var BSTID = "";
					var USER = "";
					var USERID = "";
					var USERNUM = 0;
					$("#BST span").each(function() {
						BST += $(this).text() + ",";
						BSTID += $(this).attr("key") + ",";
					});
					$("#YH span").each(function() {
						USER += $(this).text() + ",";
						USERID += $(this).attr("key") + ",";
						USERNUM++;
					});
					USER = USER.substring(0, USER.length - 1);
					BSTID = BSTID.substring(0, BSTID.length - 1);
					USERID = USERID.substring(0, USERID.length - 1);
					if(USERID == "") {
						notice.info("请先选择用户");
						return;
					}
					if(BSTID == "") {
						notice.info("请先选择笔试题");
						return;
					}
					$("#usernum").val(USERNUM);
					$("#usernames").val(USER);
					$.ajax({
						type: 'post',
						url: host() + '/PublishWrittenTest',
						data: {
							token: localStorage.token,
							userIds: USERID,
							questionIds: BSTID
						},
						dataType: 'json',
						async: true,
						success: function(msg) {
							var usernum = $("#usernum").val();
							var usernames = $("#usernames").val();
							var usernameList = usernames.split(",");
							var u = '';
							for(var i = 0; i < usernum; i++) {
								u = '<div class="layui-input-block"><input type="text" name="URL" style="border:0" readonly="readonly"   lay-verify="title" autocomplete="off"  class="layui-input" value="笔试者：' + usernameList[i] + ' URL:   ' + msg.data[i] + '"></input></div>'
								$("#urlList").append(u);
							}
							$("#BST").empty();
							$("#YH").empty();
							$("#exam").val("");
							$("#exam").text('请选择');
							$("#user").val("");
							$("#user").text('请选择');
							notice.success(msg.msg);
						},
						error: function(msg) {
							notice.error("新增笔试失败" + msg.msg);
						}
					})

				})

				$("#returnEXAMList").click(function() {
					window.open("examManage.html", "iframe")
				})
			});
		</script>
	</body>

</html>